<template>
    <div id="app">
        <div class="page-wrap"><router-view ></router-view></div>
        <mt-tabbar fixed :selected="tabbarData[0]['id']" >
            <mt-tab-item v-for="i in tabbarData" :id="i['id']" v-link="{path: i['router'], active: 'is-selected'}" data-router="{{i['router']}}">
                <img slot="icon" :src="i['src']"/>
                {{i['id']}}
            </mt-tab-item>
        </mt-tabbar>
    </div>
</template>

<script>

    import {Tabbar, TabItem} from 'mint-ui'
    export default {
        data(){
            return {
                tabbarData: [
                    {'id': '电影', src: '', router: '/movie'},
                    {'id': '订单', src: '', router: '/order'},
                    {'id': '发现', src: '', router: '/found'},
                    {'id': '我的', src: '', router: '/me'}
                ]
            }
        },
        components: {
            Tabbar,
            TabItem
        },
        methods: {
            toast: function(str){
                Toast({
                    message: str,
                    duration: 3000
                });
            }
        },
        ready(){
            console.log('我在ready中执行啦');
        }
    }
</script>

<style>
    *{margin:0;padding:0;}
    html {
        height: 100%;
        font-family: "Microsoft YaHei";
    }

    body {
        /*display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;*/
    }
    .page-wrap{height: 100%;padding-bottom:70px;}
    .mint-tab-item{text-decoration:none;color:#555;}
</style>
